<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手机列表页</title>
    <link rel="shortcut icon" href="../favicon.ico"/>
    <script src="../libs/jquery.min.js"></script>
    <link rel="stylesheet" href="../css/hf_index.css">
    <link rel="stylesheet" href="../css/list.css">
    <link rel="stylesheet" href="../libs/iconfont/iconfont.css">
    <script src="../js/list.js"></script>
    <script src="../libs/jquery-paging.js"></script>
    <link rel="stylesheet" href="../css/list_pages.css">


</head>
<body>
    <!-- 头部区域 -->
    <header></header>

    <!-- 内容区域 -->
    <main>
        <nav>
            <div>
                <div class="logo"><a href="../index.html"><img src="../img/logo.png" alt=""></a></div>
                <ul>
                    <li><a href="../html/list.html">华为专区</a></li>
                    <li><a href="#">鸿蒙智联</a></li>
                    <li><a href="#">全球甄选</a></li>
                    <li><a href="#">家电家装馆</a></li>
                    <li><a href="#">华为智选</a></li>
                    <li><a href="#">HarmonyOS</a></li>
                </ul>
                <div class="search">
                    <div>
                        <span class="iconfont">&#xe618</span>
                        <input type="text" placeholder="搜索商品">
                        <span>×</span>
                    </div>                
                </div>
            </div>
        </nav>


        <!-- 商品列表区域 -->
        <div class="shoplist">
            <!-- 商品列表小导航 -->
            <div class="listnav">
                <div><a href="../index.html">首页</a><span>&nbsp;>&nbsp;</span></div>
                <div><a href="">手机</a></div>
            </div>

            <!-- 商品类型 -->
            <div class="listtype">
                <div class="type">
                    <span>分类 ：</span>
                    <ul>
                        <li><a href="">手机</a></li>
                        <li><a href="">配件</a></li>
                        <li><a href="">保护壳</a></li>
                        <li><a href="">P30 二手机</a></li>
                        <li><a href="">充电器/线材</a></li>
                        <li><a href="">保护套</a></li>
                        <li><a href="">自拍杆/支架</a></li>
                        <li><a href="">移动电源</a></li>
                    </ul>
                    <span>更多</span>
                </div>
                <div class="type">
                    <span>服务优惠 ：</span>
                    <ul>
                        <li><a href="">仅看有货</a></li>
                        <li><a href="">分期免息</a></li>
                        <li><a href="">优惠商品</a></li>
                    </ul>
                </div>
                <div class="type">
                    <span>屏幕尺寸 ：</span>
                    <ul>
                        <li><a href="">
                            6.0-6.5英寸</a></li>
                        <li><a href="">6.5英寸以上</a></li>
                    </ul>

                </div>
                <div class="type">
                    <span>更多选项 ：</span>
                    <ul>
                        <li><a href="">运行内存
                        </a></li>
                        <li><a href="">存储容量</a></li>
                        <li><a href="">上市时间</a></li>
                    </ul>

                </div>
                <div class="type">
                    <span>排序 ：</span>
                    <ul>
                        <li><a href="">综合</a></li>
                        <li><a href="">最新</a></li>
                        <li><a href="">评论数</a></li>
                    </ul>

                </div>
            </div>

            <!-- 商品列表 -->
            <div class="listlist">
                <ul  class="paging_list">
                    <!-- <li>
                        <img src="../img/phone1.png" alt="">
                        <span>HUAWEI Mate 40 Pro 4G版</span>
                        <span>超感知徕卡电影影像</span>
                        <span>¥5899</span>
                        <span>赠送积分</span>
                        <span>2318人评价98% 好评</span>
                    </li>
                     -->
                </ul>
                
                <div class="paging_content">
                    <div class="paging_first">首页</div>
                    <div class="paging_up">上一个</div>
                    <div class="paging_btn"></div>
                    <div class="paging_down">下一个</div>
                    <div class="paging_last" id="">尾页</div>
                </div>
            </div>

           
            
        </div>
    </main>

    <!-- 尾部区域 -->
    <footer></footer>

    <script>
        //头部和尾部加载
        $('header').load('./header.html',()=>{
            (function fn(){
                let session = sessionStorage.getItem('name')-0
                if(!session){
                    $('.headeruser').html('登录')
                    $('.headerpass').html('注册')
                }else{
                    let local = JSON.parse(localStorage.getItem('DELL'))
                    let find = local[session]
                    // console.log(find.user)
                    $('.headeruser').html('欢迎'+ find.user)
                    $('.headerpass').attr('href','#')
                    $('.headerpass').html('退出').on('click', function () {
                        $('.headeruser').html('登录')
                        $('.headerpass').html('注册')
                        // .attr('href','../html/register.html')
                        sessionStorage.removeItem('name')
                        location.href="../index.html"
                    })
                    
                }
                
            }())
        })
        $('footer').load('./footer.html',()=>{
            

            $('.gocart').on('click',function(){
                let user = document.querySelector('.headeruser').innerHTML
                let localuser = JSON.parse(localStorage.getItem('DELL'))
                let res = localuser.some(item=>{return '欢迎'+item.user == user})
                
                if(!res){
                    alert("您还未登陆！")
                    $('.gocart').removeAttr('href')
                }
            })

        })
    </script>
</body>
</html>